﻿<div class="container">
    <div class="row clearfix">
        <div class="col-md-10 column col-md-offset-1">
            <br /><div class="panel panel-default">
                <div class="panel-body">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active">
                            <div class="btn" ng-click="show(1)">Profile</div>
                        </li>
                        <li><div class="btn" ng-click="show(2)">Your Games</div></li>
                        <li><div class="btn" ng-click="show(3)">Your Rentals</div></li>
                        <li><div class="btn" ng-click="show(4)">Add Games</div></li>
                    </ul>
                </div>
            </div>
        </div>
        <div ng-if="ShowAddGame">
            <div class="panel-body" ng-controller="ngAddGameController">
                <div class="row">
                    <div class="col-sm-10 col-md-offset-1">
                        <table ng-hide="addingGame" class="table table-hover">
                        <thead>Add Games From Our Amazon Catalog</thead>
                            <tr ng-click="showGameForm(azGame)" ng-repeat="azGame in azGames">
                                <td>{{azGame.Title}}</td>
                                <td>{{azGame.Platform}}</td>
                                <td>{{azGame.Genre}}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="panel-body">
                        <div class="col-sm-10 col-md-offset-1">
                            <div ng-show="addingGame">
                                <form class="form-horizontal" role="form">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label">Title</label>
                                        <div class="col-md-8">
                                            <h5>{{newGame.Title}}</h5>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label">Genre</label>
                                        <div class="col-md-8">
                                            <h5>{{newGame.Genre}}</h5>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label">Gaming Platform</label>
                                        <div class="col-md-8">
                                            <h5>{{newGame.Platform}}</h5>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label">Sell Price $</label>
                                        <div class="col-md-8">
                                           <input type="number" class="form-control" step="any" ng-model="newGame.SellPrice" placeholder="Sell Price" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label">Rent Price $</label>
                                        <div class="col-md-8">
                                            <input type="number" class="form-control" step="any" ng-model="newGame.RentPrice" placeholder="Rent Price" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label">Trade?</label>
                                        <div class="col-md-8">
                                            <label>
                                                <input type="radio" name="trade" ng-model="newGame.WillTrade" checked value="true" />
                                                Yes
                                            </label><br />
                                            <label>
                                                <input type="radio" name="trade" ng-model="newGame.WillTrade" checked value="false">
                                                No
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label"></label>
                                        <div class="col-sm-8">
                                            <input type="submit" class="btn btn-block btn-success" ng-click="addGame(newGame)" value="Add Game" />
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--<h3>{{newGame.Title}}</h3>
            <h5>{{newGame.Platform}}</h5>
            <h5>{{newGame.Genre}}</h5>
            <form ng-show="addingGame" class="form-horizontal">

            </form>-->
            <!--<div class="panel-body" ng-controller="ngAddGameController">
                <div class="col-md-12">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">Title</label>
                            <div class="col-md-8">
                                <input class="form-control" type="text" ng-model="game.Title" placeholder="Title" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">Genre</label>
                            <div class="col-md-8">
                                <input class="form-control" type="text" ng-model="game.Genre" placeholder="Genre" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">Gaming Platform</label>
                            <div class="col-md-8">
                                <input class="form-control" type="text" ng-model="game.Platform" placeholder="Platform" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">Condition</label>
                            <div class="col-sm-8">
                                <select name="Condition" class="form-control" ng-model="game.Condition">
                                    <option value="Excellent">Excellent</option>
                                    <option value="Good">Good</option>
                                    <option value="Bad">Bad</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">Sell Price</label>
                            <div class="col-md-8">
                                <input class="form-control" type="number" ng-model="game.SellPrice" placeholder="$Sell Price" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">Rent Price</label>
                            <div class="col-md-8">
                                <input class="form-control" type="number" ng-model="game.RentPrice" placeholder="$Rent Price" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">Trade?</label>
                            <div class="col-md-8">
                                <label>
                                    <input type="radio" name="trade" ng-model="game.WillTrade" checked value="true" />
                                    Yes
                                </label><br />
                                <label>
                                    <input type="radio" name="trade" ng-model="game.WillTrade" checked value="false">
                                    No
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label"></label>
                            <div class="col-sm-8">
                                <input type="submit" class="btn btn-block btn-success" ng-click="saveGame(game)" />
                            </div>
                        </div>
                    </form>

                </div>
            </div>-->
        </div>
        <div ng-if="ShowRentals">
            <div ng-controller="ngRentalController">
                <div class="col-md-10 col-md-offset-1">
                    <h4>These are games you either bought or have rented:</h4>
                    <div ng-repeat="rental in rentals">
                        <div class=" panel-group" id="accordion">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" ng-click="collapseRental(rental)">
                                            <h5>{{rental.GameDetailVM.Title}}</h5>
                                        </a>
                                    </div>
                                </div>
                                <div class="panel-collapse collapse in" data-ng-show="rental.collapseRental">
                                    <div class="panel-body">
                                        <div ng-show='rental.SoldPrice>0'> Sold price: {{rental.SoldPrice}}</div>
                                        <div ng-show='rental.RentedPrice>0'> Rented price: {{rental.RentedPrice}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div ng-if="YourGames" ng-controller="yourGamesController">
            <div class="col-md-10 col-md-offset-1">
                <h3>Welcome {{username}}! </h3>
                <h4>These are your current games:</h4>
                <div ng-repeat="game in usergames| filter:genre | filter:SearchField | orderBy: 'Title'">
                    <div class="panel-group" id="accordion">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <div class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" ng-click="collapseGame(game)">
                                        <h5>{{game.Title}}</h5>
                                    </a>
                                </div>
                            </div>
                            <div class="panel-collapse collapse in" data-ng-show="game.collapseGame">
                                <div class="panel-body">
                                    <div>{{game.Genre}}</div>
                                    <div>{{game.Platform}}</div><br />


                                    <div ng-repeat="rental in game.RentalVM">
                                        <div>Renter Name: {{rental.UserName}}</div>
                                        <div>Rented Price: {{rental.RentedPrice}}</div>
                                        <div>Returned: {{rental.WasReturned}}</div>
                                        <button ng-hide="rental.WasReturned" ng-click="rentalReturn(rental)" value="Rental Returned" class="btn btn-primary">Rental Returned</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div ng-if="YourProfile" ng-congroller="yourProfileController">show your profile</div>
        </div>
    </div>
